<template>
  <div class="app">
    <div class="noSearch" v-if="type && listType">
      <van-search
        :value="value"
        placeholder="搜索商品名称"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
      <div class="store_img" v-if="productList.length===0 && serchType">
        <img src="/static/images/store/searchFail.png" alt />
        <p>暂未搜索到相关商品</p>
      </div>
    </div>
    <div class="activeTab" v-else>
      <van-tabs
        :active="active"
        :border="false"
        color="#187798"
        sticky
        swipeable
        @change="tabChange"
        name="integral"
        @click="changeIntegral()"
      >
        <van-tab :title="item" :name="item" v-for="(item, index) in tabList" :key="index">
          <!-- 有数据 -->
          <div class="searchResult" v-if="productList.length>0">
            <ul>
              <li
                v-for="(item1,index1) of productList"
                :key="index1"
                @click.stop="productItemClick(index1)"
              >
                <div
                  class="title"
                  style="width: 100%; height: 330rpx; display: flex; justify-content: center; align-items: center;background:#F7F7F6"
                >
                  <img :src="item1.coverImg" class="product-icon" />
                </div>
                <p>{{item1.goodsName}}</p>
                <div class="integral">
                  <span
                    style="color: #F45247; font-size: 14px; margin-left: 10px;font-weight:800"
                  >{{item1.salePrice}}积分</span>
                </div>
              </li>
            </ul>
          </div>
          <!-- 无数据-->
          <div class="empty" v-if="!loadMore && productList.length===0">
            <div class="store_img" v-if="productList.length===0 && active === 2">
              <img src="/static/images/store/searchFail.png" alt />
              <p>暂未搜索到相关数据</p>
            </div>
            <div style="text-align:center" v-else>
              <img class="emptyIcon" src="/static/images/user/collect_icon.png" alt />
              <p class="emptyText">暂无数据</p>
            </div>
          </div>
        </van-tab>
        <!-- <div class="store_img" v-else>
          <div>
            <img src="/static/images/store/searchFail.png" alt />
            <p>暂未相关商品</p>
          </div>
        </div>-->
      </van-tabs>
      <div>
        <div class="activeMore" v-if="productList.length>0 && !isReachBottom">—— 已经到底啦 ——</div>
      </div>
      <!-- 筛选 -->
      <div class="screen" v-if="screenType">
        <div class="show">
          <div style="max-height:344px;overflow: auto;width:100%">
            <div>
              <p class="weight" style="padding:15px 12px 15px 15px;">积分范围</p>
              <div class="flex type flex-pack-justify align-center">
                <!-- <div
                  class="typeItem"
                  @click="showIndex1=index"
                  v-for="(item,index) in showList1"
                  :key="index"
                >{{item}}</div>-->
                <input
                  class="typeItem"
                  type="number"
                  placeholder="最低价"
                  v-model="goodsParms.integralMin"
                  placeholder-style="font-size:13px; color: #B8BAB9FF;"
                />
                ~
                <input
                  class="typeItem"
                  type="number"
                  placeholder="最高价"
                  v-model="goodsParms.integralMax"
                  placeholder-style="font-size:13px; color: #B8BAB9FF;"
                />
              </div>
            </div>
          </div>
          <div class="flex btm">
            <div class="again flex-1" @click="jumpAgain">取消</div>
            <div class="sucess flex-1" @click="jumpSucess">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { queryGoods } from "@/api/api";
// let productList = [];
export default {
  props: {},
  data() {
    return {
      value: "",
      serchType: false,
      listType: true,
      goodsParms: {
        selectSortType: "",
        goodsName: "",
        classifyId: "",
        integralMax: "",
        integralMin: "",
        pageIndex: 1,
        pageSize: 10
      },
      showIndex1: 0,
      tabList: ["综合", "热门", "积分"],
      screenType: false,
      active: 0,
      activeIndex: 0,
      // 商品
      productList: [],
      loadMore: true,
      type: null,
      integralFlag: false
    };
  },
  computed: {},
  onReachBottom() {
    // if (isReachBottom && !this.isLastPage) {
    //   console.log("1");
    //   isReachBottom = false;
    //   this.queryGoods();
    // }
    console.log("more");
    this.goodLists();
  },
  onShow() {
    /**修改title */
    // 点击tabbar下的列表详情返回时还在原标签
    // this.saleSort();
    // this.productList = productList.sort((item1, item2) => {
    //   console.log("ccccccccccccccccccc");
    //   return item2.saleNum - item1.saleNum;
    // });
    let name = this.$root.$mp.query;
    if (name.type) {
      console.log(name, "trrrrrrrr");
      wx.setNavigationBarTitle({
        title: this.productList.length === 0 ? "搜索商品" : "商品列表"
      });
    }
  },
  mounted() {
    // 可以将当前状态的data重置为初始状态
    Object.assign(this.$data, this.$options.data());
    let query = this.$root.$mp.query;
    this.type = query.type ? query.type : null;
    this.goodsParms.classifyId = query.classifyId ? query.classifyId : "";
    if (this.goodsParms.classifyId || query.allType) {
      this.listType = false;
      this.goodLists();
    }
  },
  watch: {},
  methods: {
    /**liebaio */
    async goodLists() {
      if (this.loadMore) {
        await queryGoods(this.goodsParms).then(res => {
          this.productList = this.productList.concat(res.list);
          if (this.productList.length > 0) {
            this.listType = false;
          } else {
            this.listType = true;
          }
          if (this.type && this.productList.length === 0) {
            wx.setNavigationBarTitle({
              title: "搜索商品"
            });
          } else {
            wx.setNavigationBarTitle({
              title: "商品列表"
            });
          }
          ++this.goodsParms.pageIndex;
          if (res.pages < this.goodsParms.pageIndex) {
            this.loadMore = false;
          }
          // console.log(res);
        });
      }
    },
    tabClick(event) {
      console.log("event", event);
      // console.log("this.active", this.active);
    },
    // 取消返回商城页
    onCancel() {
      wx.navigateBack({
        delta: 1
      });
    },
    // 搜索
    onSearch(e) {
      console.log("e", e);
      console.log(this.value, "tttttttttttttt");
      this.loadMore = true;
      this.serchType = true;
      let text = e.mp.detail;
      this.goodsParms.goodsName = text;
      if (text === "") {
        wx.setNavigationBarTitle({
          title: "搜索商品"
        });
        wx.showToast({
          title: "请输入搜索内容",
          duration: 2000,
          mask: true,
          icon: "none"
        });
      } else {
        console.log(this.value, "tttttttttttttt");

        this.goodLists();
      }
    },

    /** 取消 */
    jumpAgain() {
      this.goodsParms.integralMin = "";
      this.goodsParms.integralMax = "";
      this.screenType = false;
    },
    /** 确定 */
    jumpSucess() {
      if (!this.goodsParms.integralMin && !this.goodsParms.integralMax) {
        wx.showToast({
          title: "请填入相应的价格区间！",
          duration: 2000,
          mask: true,
          icon: "none"
        });
      } else {
        this.loadMore = true;
        this.screenType = false;
        this.productList = [];
        this.goodsParms.pageIndex = 1;
        this.goodLists();
      }
    },
    // 跳到商品详情页
    /**
     * 商品点击
     */
    productItemClick(index) {
      console.log("index:", index);
      wx.navigateTo({
        url: `/pages/store/children/commodityDetails/main?classifyId=${
          this.productList[index].id
        }`
      });
    },

    /**
     * 切换排序
     */
    tabChange(event) {
      console.log(event.target);
      this.active = event.target.index;

      if (event.target.event === "综合" || this.active === 0) {
        this.goodsParms.selectSortType = "";
        this.goodsParms.integralMin = "";
        this.goodsParms.integralMax = "";
        this.screenType = false;
      }
      if (event.target.event === "热门" || this.active === 1) {
        this.screenType = false;
        // 切换到 热门
        this.goodsParms.selectSortType = "SALES";
        this.goodsParms.integralMin = "";
        this.goodsParms.integralMax = "";
      }
      if (event.target.event === "积分" || this.active === 2) {
        // 切换到 积分
        this.goodsParms.selectSortType = "";
        this.screenType = false;
      }
      this.goodsParms.pageIndex = 1;
      this.productList = [];
      this.loadMore = true;
      this.goodLists();
    },
    // 再次点击积分隐藏筛选积分模态框
    changeIntegral() {
      if (this.active === 2) {
        this.screenType = !this.screenType;
      }
      console.log(this.screenType, "iiiiii");
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
// 筛选框
.type {
  flex-wrap: wrap;
  padding-left: 10px;

  .typeItem {
    width: 150px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 2px;
    font-size: 13px;
    border: 1px solid #e6e7e3ff;
  }
}
.weight {
  padding-bottom: 12px;
  font-weight: bold;
}
.app {
  // background-color: #f7f7f6ff;
  .activeTab {
    // padding-top: 15px;
    height: 44px;
    width: 100%;
    background: #fff;
    z-index: 1;
    box-shadow: 0 0 20px 0 rgba(2, 6, 4, 0.06);
  }
}
.app /deep/.van-tab--active .van-ellipsis {
  font-size: 16px;
  font-family: PingFangSC;
  letter-spacing: 3px;
  font-weight: 700;
  line-height: 25px;
  color: rgba(24, 119, 152, 1);
}
.app /deep/ .van-ellipsis {
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  letter-spacing: 3px;
  font-size: 13px;
  font-family: PingFangSC;
  font-weight: 400;
  line-height: 25px;
  color: rgba(144, 146, 146, 1);
}
.app /deep/ .van-tabs__line {
  // width: 20px !important;
  bottom: 0;
  left: 18px;
  width: 26px !important;
  text-align: center !important;
  // left: 0;
  // -webkit-transform: translateX(22px) !important;
  // transform: translateX(22px) !important;
  // transition-duration: 0.3s !important;
  // -webkit-transition-duration: 0.3s !important;

  z-index: 1;
  height: 4px;
  background-color: #187798ff;
  border-radius: 3px;
  .van-tabs__wrap /deep/ {
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  }
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 16px;

  li {
    width: 167px;
    height: 262px;
    background-color: #fff;
    margin-bottom: 10px;
    font-family: PingFangSC;
    font-weight: 400;
    border-radius: 2px;
    border: 1px solid #f7f7f6;
    box-sizing: border-box;
  }
  .product-icon {
    width: 165px;
    height: 165px;
    border-radius: 2px;
  }

  p {
    height: 50px;
    box-sizing: border-box;
    line-height: 20px;
    font-weight: 700;
    padding: 10px;
    color: #081020;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }

  .integral {
    padding-top: 10px;
  }
}

.store_footer {
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  height: 63px;
  line-height: 63px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #b8bab9;
}

.searchResult {
  // padding: 15px 15px 0;
  padding: 0 15px;
  // margin-top: 15px;
  // background-color: rgb(248, 248, 248);
  // background-color: #fff;
}

// 没有搜索到内容的时候
.store_img {
  text-align: center;

  img {
    height: 175px;
    width: 230px;
    margin: 90px auto 40px;
  }

  p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
    line-height: 20px;
  }
}

// 筛选框
.screen {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  left: 0;
  top: 44px;
  background: rgba(0, 0, 0, 0.3);
  .show {
    border-top: 0.5px solid #e6e6e6;
    // max-height: 390px;
    background: #fff;
    // position: relative;
  }
  .type {
    flex-wrap: wrap;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 25px;

    .typeItem {
      width: 150px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 2px;
      font-size: 13px;
    }
  }
  .btm {
    text-align: center;
    border-top: 0.5px solid #e6e6e6;
    height: 46px;
    line-height: 46px;
    .again {
      color: #020604;
      font-size: 15px;
      border-right: 0.5px solid #e6e6e6;
    }
    .sucess {
      color: #187798;
      font-size: 15px;
    }
  }
}
// 搜索部分
.store_search {
  padding: 15px;
  height: 34px;
  position: relative;
  background-color: #fff;
  display: flex;

  input {
    flex: 1;
    background-color: #f8f8f8;
    height: 34px;
    width: 100%;
    padding-left: 37px;
    box-sizing: border-box;
    border-radius: 2px;
    font-size: 13px;
  }

  img {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(107, 107, 107, 1);
    line-height: 34px;
    margin-left: 15px;
  }
}

.showColor {
  color: #187798;
  border: 1px solid #187798;
}
.showColor1 {
  border: 1px solid rgba(230, 231, 227, 1);
  color: #6b6b6b;
}

.activeMore {
  height: 74px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 700;
  color: #b8bab9;
  line-height: 74px;
  text-align: center;
  // padding-top: 5px;
}
.empty {
  margin-top: 90px;
  .emptyText {
    margin-top: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
    line-height: 20px;
  }
}
</style>
